

<html>
<head>
<link type="text/css"
	href="<%=request.getContextPath()%>/jquery/css/ui-lightness/jquery-ui-1.8.11.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/jquery/plugin/jquery.form.js'></script>
<script>
	var $j = jQuery.noConflict();
</script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/MyManager.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'></script>
</head>
<body>
	<h2>Hello World!</h2>
	<form id="formId" action="<%=request.getContextPath()%>/QueryServlet" target="_blank">

		<p>
			Sql: <select id="sqlSelect" name="sqlName">
				<option>Please select</option>
			</select> <br /> Sql:
		<div id="sqlDiv"></div>

		<button type="button" onclick="doQuery();">Query</button>
		<table id="paramTable" border="1">
			<tr>
				<td>paramName</td>
				<td>javaType</td>
				<td>handlerClass</td>
				<td>ParamValue</td>
			</tr>

			<tr>
				<td>paramName</td>
				<td>javaType</td>
				<td>handlerClass</td>
				<td>ParamValue</td>
			</tr>

			<tr>
				<td>paramName</td>
				<td>javaType</td>
				<td>handlerClass</td>
				<td>ParamValue</td>
			</tr>

		</table>
		</p>
	</form>
	
	<hr>
	
	<div id="tableDiv">
	
	</div>
	
</body>
</html>
<script>
	$j(function() {

		var sqlSelect = $j('#sqlSelect');
		MyManager.getStatementNames(function(data) {

			for ( var i = 0; i < data.length; i++) {
				var stmtName = data[i];
				$j("<option value='"+stmtName+"'>" + stmtName + "</option>")
						.appendTo(sqlSelect);
			}
		});

		sqlSelect
				.change(function() {
					var stmtName = sqlSelect.children('option:selected').val();
					MyManager
							.getStatementByName(
									stmtName,
									function(data) {
										dwr.util.setValue("sqlDiv", data.sql);

										

										// delete tr
										$j('#paramTable tr').not(':first')
												.remove();
										var params = data.parameterMappings;
										for ( var i = 0; i < params.length; i++) {
											var str = "<tr>";
											str += "<td>";
											str += params[i].paramName;
											str += "</td>";

											str += "<td>";
											str += params[i].javaType;
											str += "</td>";
											
											str += "<td>";
											str += params[i].handlerClassName;
											str += "</td>";

											str += "<td>";
											str += "<input name='";
											str += "param_";
											str += params[i].paramName;
											str += "'";
											str += " type='text' />"
											
											
											str += "<input name='";
											str += "javaType_";
											str += params[i].paramName;
											str += "'";
											str += " value='";
											str += params[i].javaType;
											str += "'";
											str += " type='text' />"
											
											
											str += "</td>";
											str += "</tr>";

											$j(str).appendTo($j('#paramTable'));
										}

									});
				});
	});

	function doQuery() {
		$j('#formId').ajaxSubmit({
			success: showResponse
		});
	}
	
	
	function showResponse(responseText) {
		$j('#tableDiv').empty();
		$j(responseText).appendTo($j('#tableDiv'));
	}
</script>
